<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#timebox{
				width: 345px;
				padding: 20px;
				border: 1px solid #CCCCCC;
				margin: 50px auto;
			}
		</style>
	</head>
	<body>
		<div id="timebox">
			<img src="images/0.png" alt="" class="timeImg" />
			<img src="images/1.png" alt="" class="timeImg" />
			<img src="images/d.png" alt=""  />
			<img src="images/3.png" alt="" class="timeImg" />
			<img src="images/4.png" alt="" class="timeImg" />
			<img src="images/d.png" alt=""  />
			<img src="images/6.png" alt="" class="timeImg" />
			<img src="images/7.png" alt="" class="timeImg" />
		</div>
		<script>
			var atimeImg = document.getElementsByClassName('timeImg');
			var imgUlr = ['images/0.png','images/1.png','images/2.png','images/3.png','images/4.png','images/5.png','images/6.png','images/7.png','images/8.png','images/9.png']
			
			
			setInterval(timer,1000)
			function timer(){
				var date = new Date();
				var hours =to(date.getHours());
				console.log(hours)
				var min = to(date.getMinutes());
				console.log(date.getMinutes())
				var sec = to(date.getSeconds());
				console.log(date.getSeconds())
				var time = hours+min+sec;
				
				for (var i = 0; i < atimeImg.length; i++) {
					atimeImg[i].src = imgUlr[Number(time.charAt(i))];
				}
			}
			
			function to(num){
				num = num>=10?num:'0'+num;
				return num.toString();
			}
			
		</script>
	</body>
</html>
